<template>
	<view class="wrap">
		<view class="item" v-for="(item,index) in list" :key="index"
		:style="{'border':`1rpx solid ${item.color}`,color:item.color}"
		>
			<!-- #ifdef H5 -->
			{{index+1}}: <view class="" v-html="item.text"></view>
			<!-- #endif -->
			
			<!-- #ifdef MP-WEIXIN -->
				{{index+1}}: <rich-text :nodes="item.text"></rich-text>
			<!-- #endif -->
		</view>
		<view class="no-more" v-if="noMore">
			靓仔靓女，我也是有底线的┗|｀O′|┛ 嗷~~
		</view>
		<view class="add" @click="addWord" v-if="isShow">
			<uni-icons custom-prefix="custom-icon" type="heart-filled" size="30" :color="randomColor()"></uni-icons>
			
		</view>
		<view class="up">
			<uni-icons custom-prefix="custom-icon" type="top" size="30" color="red" @click="toTop" v-if="showTop"></uni-icons>
		</view>
		<!-- 普通弹窗 -->
		<uni-popup ref="popup" background-color="#fff"  >
			<view class="popup-content" >
				<textarea v-model="text" placeholder="添加你的情话吧~"></textarea>
			</view>
			<view class="btn">
				<button @click="submit" size="mini" type="default" class="a-btn">添加</button>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { onLoad ,onReachBottom ,onPageScroll } from '@dcloudio/uni-app'
	import { ref ,reactive } from 'vue'
	const word = uniCloud.importObject('word');
	const list = ref([]);
	const text = ref('');
	const isShow = ref(false);
	const color = ref('');
	const showTop = ref(false)
	let reqParams = reactive({
		page:1,
		pageSize:15
	})
	let noMore = ref(false);
	const randomColor = () => `#${Math.random().toString(16).substr(2, 6)}`
	const popup =ref()
	const addWord = ()=>{
		popup.value.open('top')
	}
	const toTop = ()=>{
		uni.pageScrollTo({
			scrollTop:0
		})
	}
	const submit = async() => {
		const result = await word.addLoverWord({
			text:text.value
		})
		reqParams.page = 1;
		popup.value.close()
		uni.showToast({
			title:result.msg,
			icon:'success',
			success: () => {
				getList()
			}
		})
	}
	const getList = async()=>{
		const data = await word.loveWordList(reqParams)
		data.data.list.forEach(item => {
			item.color = randomColor()
		})
		list.value = [...list.value,...data.data.list];
		let index = list.value.findIndex(row => row.text == text.value);
		text.value = '';
		if(index>-1){
			[list.value[0],list.value[index]] = [list.value[index],list.value[0]]
		}
		noMore.value = data.data.list.length?false:true;
		isShow.value = true;
		if(noMore.value){
			uni.showToast({
				title:'靓仔靓女，我也是有底线的┗|｀O′|┛ 嗷~~',
				icon:'none'
			})
		}
	}
	onLoad(()=>{
		color.value = randomColor()
		getList()
	})
	onPageScroll((res)=>{
		if(res.scrollTop >800) showTop.value = true
		else showTop.value = false
	})
	onReachBottom(()=>{
		reqParams.page++
		!noMore.value && getList()
	})
</script>

<style lang="scss">
.wrap{
	padding: 10rpx;
	box-sizing: border-box;
	.item{
		padding: 20rpx;
		border-radius: 8rpx;
		margin: 20rpx 0;
		display: flex;
	}
	.no-more{
		text-align: center;
		color:#999;
		font-size: 30rpx;
		margin-bottom: 20rpx;
	}
	.add{
		position: fixed;
		bottom: 50rpx;
		right: 20rpx;
	}
	.up{
		position: fixed;
		bottom: 180rpx;
		right: 20rpx;
	}
	.popup-content{
		height: 300rpx;
		padding: 20rpx;
		box-sizing: border-box;
		textarea{
			border: 1rpx solid #666;
			border-radius: 16rpx;
			height: 200rpx;
			padding: 16rpx;
			box-sizing: border-box;
		}
		uni-textarea{
			width: 100%;
		}
	}
	.btn{
		text-align: center;
		.a-btn{
			color:v-bind(color)
		}
	}
}

</style>
